<template>
  <div class="liveView" v-show="showPlayer" @click.stop="gopage">
      <video id="example_video_1" class="video-js vjs-default-skin">
        <source :src="src" type="video/mp4">
      </video>
      <!-- <button id="playBtn" style="position: absolute;left:0;top:0" @click.stop="play()">对方的反对法地方大师傅地方第三方</button> -->
  </div>
</template>
 
<script>
import { reactive,toRefs,onMounted,onBeforeUnmount,computed } from 'vue'
import { useRoute,useRouter } from 'vue-router'
import { useStore } from 'vuex'
export default {
  components:{
    
  },
  props:{
    src:String,
  },
  setup(props,context){
    const router = useRouter()
    const store = useStore()
    const state = reactive({
        player:'',
        showPlayer:false,
        playIng:false,
        options:{
           autoplay:true,
           controls:false,
           loop:true,
           muted:false
        }, 
        carDetail:computed(()=>store.state.carDetail),
    })

    onMounted(()=>{ 
      setTimeout(()=>{
        videojs('example_video_1',state.options,function onPlayerReady() {
          state.player = this
          console.log('播放器已经准备好了!')
          state.showPlayer = true
          setTimeout(()=>{
            console.log("播放.....")
            this.play();
            this.on('playing', function () {
              state.playIng = true  // 正在播放中
            });
            
            //document.getElementById('playBtn').click()
          },500)
        });
      },500)
    })

    onBeforeUnmount(()=>{
      state.player.dispose() // 销毁播放器
    })

    const gopage = ()=>{
      if(state.playIng){
          if(state.carDetail.showAdOnly!=1){
            router.push('/main')
          }
      }else{
        state.player.play()  // 播放视频
      }
    }


    return {
      ...toRefs(state),
      gopage
    }
  }
}
</script>
 
<style scoped>
.liveView {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
</style>
<style>
.liveView .video-js{
  height: 100%;
  width: 100%;
}

</style>
